<!-- head -->
{include file='public/head' /}
<!-- head -->

<!-- left -->
{include file='public/left' /}
<!-- left -->

<div class="content-wrapper">
    <section class="content-header">
        <h1>
            数据分析
            <small>全部店铺</small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i> 店铺管理</a></li>
            <li class="active">数据分析</li>
        </ol>
    </section>

    <section class="content">
        <div class="row">
            <div class="col-sm-12">
                <div class="box box-primary">
                    <div class="box-header with-border">
                        <h3 class="box-title" style="font-size: 14px;">共计条记录</h3>
                        <div class="box-tools pull-right">
                            <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                            </button>
                            <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
                        </div>
                    </div>
                    <div class="box-body">
                        <div class="table-responsive">
                            <table class="table table-bordered table-striped">
                                <form id='iform' action="{:url('Store/StoreEcharts')}" method="get">
                                    <div class="input-group">
                                        <select name="year" class="form-control select" style="width: 25%">
                                            {for start="2016" end="$years"}
                                            {if condition="$i eq $year"}
                                            <option value="{$i}" selected="selected">{$i}年</option> 
                                            {else /}
                                            <option value="{$i}">{$i}年</option> 
                                            {/if}
                                            {/for}
                                        </select> 
                                        <select class="form-control select2" name="prov" id="prov" onChange="getCity()" style="width: 25%">
                                            <option selected="selected" value="">请选择省份</option>
                                            {volist name='provdata' id='provdata'}
                                            {if condition="$provdata['id'] eq $prov"}
                                            <option value="{$provdata.id}" selected>{$provdata.name}</option>
                                            {else/}
                                            <option value="{$provdata.id}">{$provdata.name}</option>
                                            {/if}
                                            {/volist}
                                        </select>
                                        <select class="form-control select2" name="city" id="city" onChange="getarea()" style="width: 25%">
                                            <option selected="selected" value="">请选择市</option>
                                        </select>
                                        <select class="form-control select2" name="area" id="area" style="width: 25%">
                                            <option selected="selected" value="">请选择县/区</option>
                                        </select>
                                        <span class="input-group-btn">
                                            <button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-calendar"></i>
                                            </button>
                                        </span>
                                    </div>
                                </form>

                            </table>
                        </div>
                    </div>
                    <center><div id="main" style="width: 95%;height:400px;"></div></center>
                </div>
            </div>

        </div>
    </section>
</div>

<script type="text/javascript" src='__STATIC__/Echarts/jquery-1.8.1.min.js'></script>
<script type="text/javascript" src='__STATIC__/Echarts/echarts.js'></script>
<script type="text/javascript" src='http://echarts.baidu.com/build/dist/echarts.js'></script>
<script type="text/javascript">
                                            // 路径配置
                                            require.config({
                                                paths: {
                                                    echarts: 'http://echarts.baidu.com/build/dist'
                                                            //echarts: 'http://127.0.0.1/php-sh-v300/public/static/Echarts'
                                                }
                                            });
                                            // 使用
                                            require(
                                                    [
                                                        'echarts',
                                                        'echarts/chart/bar', // 使用柱状图就加载bar模块，按需加载
                                                        'echarts/chart/line' // 使用柱状图就加载bar模块，按需加载
                                                    ],
                                                    function loaddata(ec) {
                                                        // 基于准备好的dom，初始化echarts图表
                                                        var myChart = ec.init(document.getElementById('main'));
                                                        var month = "{$month}";
                                                        month = month.split(',');
                                                        var storeData = "{$storeData}";
                                                        storeData = storeData.split(',');
                                                        option = {
                                                            title: {
                                                                text: '克克美店铺数据分析',
                                                                subtext: '数据展示'
                                                            },
                                                            tooltip: {
                                                                trigger: 'axis'
                                                            },
                                                            legend: {
                                                                data: ['店铺总数（家）']
                                                            },
                                                            toolbox: {
                                                                show: true,
                                                                feature: {
                                                                    mark: {show: false},
                                                                    dataView: {show: false, readOnly: false},
                                                                    magicType: {show: true, type: ['line', 'bar']},
                                                                    restore: {show: true},
                                                                    saveAsImage: {show: true}
                                                                }
                                                            },
                                                            calculable: true,
                                                            xAxis: [
                                                                {
                                                                    type: 'category',
                                                                    data: month
                                                                }
                                                            ],
                                                            yAxis: [
                                                                {
                                                                    type: 'value'
                                                                }
                                                            ],
                                                            series: [
                                                                {
                                                                    name: '店铺总数（家）',
                                                                    type: 'bar',
                                                                    data: [{$storeData}],
                                                                    itemStyle: {
                                                                        normal: {
                                                                            color: '#4ad2ff'
                                                                        }
                                                                    },
                                                                    markPoint: {
                                                                        data: [
                                                                            {type: 'max', name: '最大值'},
                                                                            {type: 'min', name: '最小值'}
                                                                        ]
                                                                    },
                                                                    markLine: {
                                                                        data: [
                                                                            {type: 'average', name: '平均值'}
                                                                        ]
                                                                    }
                                                                },
                                                            ]
                                                        };
                                                        // 为echarts对象加载数据 
                                                        myChart.setOption(option);
                                                    }
                                            );

                                            function getCity() {
                                                var options = $("#prov option:selected").val();  //获取选中的项
                                                $.ajax({
                                                    url: "{:url('admin/Store/selectcity','','')}",
                                                    type: 'GET',
                                                    data: {
                                                        'id': options,
                                                    },
                                                    dataType: 'JSON',
                                                    success: function (data) {
                                                        var arr = data;
                                                        var dataObj = eval("(" + arr + ")");
                                                        var data = dataObj.data;
                                                        //var sltCity = document.form1.city;     //获得城市下拉框的对象  
                                                        var obj = document.getElementById('city');
                                                        obj.options.length = 1;
                                                        for (var i = 0; i < data.length; i++) {
                                                            //sltCity[i + 1] = new Option(data[i]['name'], data[i]['name']);
                                                            $("#city").append("<option value='" + data[i]['id'] + "'>" + data[i]['name'] + "</option>");
                                                        }
                                                        console.log(data);
                                                    }
                                                });
                                            }
                                            ;
                                            function getarea() {
                                                var options = $("#city option:selected").val();  //获取选中的项
                                                $.ajax({
                                                    url: "{:url('admin/Store/selectarea','','')}",
                                                    type: 'GET',
                                                    data: {
                                                        'id': options,
                                                    },
                                                    dataType: 'JSON',
                                                    success: function (data) {
                                                        var arr = data;
                                                        var dataObj = eval("(" + arr + ")");
                                                        var data = dataObj.data;
                                                        //var sltCity = document.form1.city;     //获得城市下拉框的对象  
                                                        var obj = document.getElementById('area');
                                                        obj.options.length = 1;
                                                        for (var i = 0; i < data.length; i++) {
                                                            //sltCity[i + 1] = new Option(data[i]['name'], data[i]['name']);
                                                            $("#area").append("<option value='" + data[i]['id'] + "'>" + data[i]['name'] + "</option>");
                                                        }
                                                        console.log(data);
                                                    }
                                                });
                                            }
</script>

<!-- foot -->
{include file='public/foot' /}
<!-- foot -->